<template>
  <view class="search-box my-search-container" :style="{ backgroundColor: bgcolor }">
    <view class="my-search-box" :style="{ borderRadius: rediu + 'px' }" @click="$emit('click', $event)">
      <uni-icons type="search" size="18"></uni-icons>
      <text class="my-search-text">搜索</text>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-search",
    props: {
      bgcolor: {
        type: String,
        default: '#c00000'
      },
      rediu: {
        type: Number,
        default: 18
      }
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .my-search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    // background-color: #c00000;
    padding: 0 10px;

    .my-search-box {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 36px;
      width: 100%;
      // border-radius: 18px;
      background-color: #ffffff;

      .my-search-text {
        margin-left: 6px;
      }
    }
  }

  .search-box {
    // 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    // 默认情况下类似于相对定位，当满足 top 等于 0 的时候，马上变为固定在那（和固定定位的差异是它会占用文档流）
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 9;
  }
</style>
